<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title>
<link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<style>
	body {
		background-color: #f2f2f2;
	}
	
	header {
		height: 40px;
		overflow: hidden;
		position: relative;
		border-bottom: 1px solid #ccc;
	}
	
	header h2 {
		text-align: center;
		line-height: 40px;
		font-weight: normal;
		font-size: 18px
	}
	
	header .icon {
		width: 30px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-align-items: center;
		align-items: center;
    	-webkit-justify-content: flex-end;
    	justify-content: flex-end;
    	padding-right: 19px
	}
	
	header .user {
		right: 0;
		left: inherit;
		padding-right: 19px;
	}
	
	header .icon img {
		width: 12px;
	}
	
	header .user img {
		width: 20px;
	}
	
	header .user a {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	section {
		margin-top: 19px;
		padding: 0 10px 10%;
	}
	
	section .wrapper {
		border-radius: 5px;
		background-color: #fff;
		padding: 7px;
	}
	
	section .wrapper .title {
		height: 38px;
		-webkit-align-items: center;
		align-items: center;
		border-bottom: 1px dashed #ccc;
	}
	
	section .wrapper .title img {
		width: 18px;
	}
	
	section .wrapper .title span {
		color: #999;
		font-size: 12px;
		margin-left: 5px;
	}
	
	section .wrapper .info {
		border-bottom: 1px dashed #ccc;
		margin-top: 17px;
	}
	
	section .wrapper .info ul li {
		-webkit-align-items: center;
		align-items: center;
		padding-bottom: 19px;
	}
	
	section .wrapper .info ul li img {
		width: 4px;
	}
	
	section .wrapper .info ul li span {
		font-size: 14px;
	}
	
	section .wrapper .info ul li span.key {
		width: 85px;
		color: #999;
		margin-left: 8px;
	}
	
	section .wrapper .tip {
		-webkit-align-items: center;
		align-items: center;
		font-size: 14px;
		color: #666;
		margin-top: 12px;
	}
	
	section .wrapper .tip img {
		width: 20px;
		margin-right: 7px;
	}
	
	section .wrapper .control {
		margin: 43px 0 30px;
	}
	
	section .wrapper .control .btn {
		border-radius: 20px;
		flex: 1;
		padding: 7px 0;
		text-align: center;
		font-size: 18px;
	}
	
	section .wrapper .control .yes {
		background-color: #f69000;
		color: #fff;
		margin-right: 6px;
	}
	
	section .wrapper .control .no {
		background-color: #fff;
		color: #999;
		margin-left: 6px;
		border: 1px solid #999;
		border-sizing: border-box;
	}
	
	section .msg {
		margin-top: 15px;
		color: #999;
		font-size: 14px;
		line-height: 24px;
	}
	
</style>
</head>
<body>
	<header>
		<div class="icon flexbox" id="back"><img src="/assets/img/order_back.png" /></div>
		<h2>车型配置</h2>
		<div class="icon user flexbox" id="back"><a href="#"></a><img src="/assets/img/order_user.png" /></div>
	</header>
		
	<section id="app">
		<div class="wrapper">
			<div class="title flexbox">
				<img src="/assets/img/qicheicon.png" />
				<span>车型配置</span>
			</div>
			<div class="info">
				<ul id="carinfo"></ul>
			</div>
			<div class="tip">
				<img src="/assets/img/tishizhuyiyemian-orcshibie@2x.png" />
				<span>请确认以上车型信息是否与实际车型一致？</span>
			</div>
			<div class="control flexbox">
				<a href="javascript:;" class="btn yes" id="yes">是</a>
				<a href="/makeprice/carphoto" class="btn no">否</a>
			</div>
		</div>
		<div class="msg">温馨提示：为确保车辆信息的一致性，请您认真核对以上行驶证上的信息。</div>
	</section>
	
	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/jquery-3.1.1.min.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script>
		$(function(){
			$('#back').click(function(){
		    	window.history.go(-1);
		    });
			
			var data = _x.getSessionStorage("xxIdentify"),
				carConfig = null
			if (_x.isEmpty(data)) {
				_x.showTip("暂无数据！")
			} else {//data.vin
				axios.post("/makeprice/identifyModelByVIN", _x.qsStringify({vin: "3GYFN9EY1BS618805"}))
				.then(function(res){
					if (res.data.ret_code == "0") {
						_x.showTip("查询失败，请检查VIN码是否正确！")
					} else {
						carConfig = res.data
						renderHtml(res.data)
					}
				})
				
			}
            
			function renderHtml (data) {
				var html = "<li class='flexbox'>"+
						   "	<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />"+
						   "	<span class='key'>品牌名称：</span>"+
						   "	<span class='value'>"+ data.brand_name +"</span>"+
						   "</li>"+
						   "<li class='flexbox'>"+
						   "	<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />"+
						   "	<span class='key'>车系名称：</span>"+
						   "	<span class='value'>"+ data.series_name +"</span>"+
						   "</li>"+
						   "<li class='flexbox'>"+
						   "	<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />"+
						   "	<span class='key'>车型：</span>"+
						   "	<span class='value'>"+ data.model_name +"</span>"+
						   "</li>"+
						   "<li class='flexbox'>"+
						   "	<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />"+
						   "	<span class='key'>变速箱：</span>"+
						   "	<span class='value'>"+ data.model_gear +"</span>"+
						   "</li>"+
						   "<li class='flexbox'>"+
						   "	<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />"+
						   "	<span class='key'>排放标准：</span>"+
						   "	<span class='value'>"+ data.model_emission_standard +"</span>"+
						   "</li>"+
						   "<li class='flexbox'>"+
						   "	<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />"+
						   "	<span class='key'>出产日期：</span>"+
						   "	<span class='value'>"+ data.model_year +"</span>"+
						   "</li>"+
						   "<li class='flexbox'>"+
						   "	<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />"+
						   "	<span class='key'>新车指导价：</span>"+
						   "	<span class='value'>"+ data.model_price +"万</span>"+
						   "</li>"
				$("#carinfo").html(html)
			}
			
			$("#yes").click(function(){
				if (carConfig === null) {
					_x.showTip("暂无数据！")
					return
				}
				_x.setSessionStorage("carConfigur", carConfig)
				window.location.href = "/makeprice/assessment"
			})
		})
	</script>
</body>
</html>
